<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>美食推荐 - 我的个人博客</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/food.css">
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/main.js" defer></script>
    <script src="assets/js/food.js" defer></script>
</head>
<body>
    <header>
        <nav class="main-nav">
            <div class="logo">
                <h1><a href="index.html">我的博客</a></h1>
            </div>
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="#" class="nav-link">技术分享</a>
                    <ul class="submenu">
                        <li><a href="frontend.html">前端开发</a></li>
                        <li><a href="backend.html">后端开发</a></li>
                        <li><a href="tools.html">开发工具</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link active">生活随笔</a>
                    <ul class="submenu">
                        <li><a href="travel.html">旅行日记</a></li>
                        <li><a href="food.html" class="active">美食推荐</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">关于我</a>
                    <ul class="submenu">
                        <li><a href="profile.html">个人简介</a></li>
                        <li><a href="contact.html">联系方式</a></li>
                    </ul>
                </li>
            </ul>
            <button id="theme-toggle" class="theme-toggle">
                <span class="light-icon">☀️</span>
                <span class="dark-icon">🌙</span>
            </button>
        </nav>
    </header>

    <main>
        <div class="page-header">
            <h2>美食推荐</h2>
            <p>分享美食，记录生活</p>
        </div>

        <div class="content-grid">
            <div class="main-content">
                <div class="search-box">
                    <input type="text" placeholder="搜索美食..." id="search-input">
                    <button type="button" id="search-btn">搜索</button>
                </div>

                <div class="food-categories">
                    <button class="category-btn active" data-category="all">全部</button>
                    <button class="category-btn" data-category="chinese">中餐</button>
                    <button class="category-btn" data-category="western">西餐</button>
                    <button class="category-btn" data-category="dessert">甜点</button>
                    <button class="category-btn" data-category="drink">饮品</button>
                </div>

                <article class="blog-post">
                    <div class="post-item" data-category="chinese">
                        <div class="post-header">
                            <h3>杭州老字号推荐</h3>
                            <div class="post-meta">
                                <span class="post-date">2024-01-20</span>
                                <span class="post-views">阅读: 456</span>
                                <span class="post-location">📍 浙江省杭州市</span>
                            </div>
                        </div>
                        <div class="food-gallery">
                            <img src="https://picsum.photos/800/400?random=31" alt="杭州名菜" class="gallery-image">
                            <div class="gallery-grid">
                                <img src="https://picsum.photos/400/300?random=32" alt="东坡肉" class="gallery-image">
                                <img src="https://picsum.photos/400/300?random=33" alt="龙井虾仁" class="gallery-image">
                                <img src="https://picsum.photos/400/300?random=34" alt="西湖醋鱼" class="gallery-image">
                            </div>
                        </div>
                        <div class="post-content">
                            <div class="food-rating">
                                <div class="rating-stars">★★★★★</div>
                                <span class="rating-score">4.8</span>
                                <span class="rating-count">(328条评价)</span>
                            </div>
                            <div class="food-info">
                                <div class="info-item">
                                    <span class="info-icon">🏠</span>
                                    <span class="info-label">店名</span>
                                    <span class="info-value">楼外楼</span>
                                </div>
                                <div class="info-item">
                                    <span class="info-icon">💰</span>
                                    <span class="info-label">人均</span>
                                    <span class="info-value">￥200-300</span>
                                </div>
                                <div class="info-item">
                                    <span class="info-icon">⏰</span>
                                    <span class="info-label">营业时间</span>
                                    <span class="info-value">10:30-21:30</span>
                                </div>
                            </div>
                            <h4>推荐菜品</h4>
                            <ul class="dish-list">
                                <li>
                                    <span class="dish-name">东坡肉</span>
                                    <span class="dish-price">￥88</span>
                                    <div class="dish-rating">★★★★★</div>
                                </li>
                                <li>
                                    <span class="dish-name">龙井虾仁</span>
                                    <span class="dish-price">￥108</span>
                                    <div class="dish-rating">★★★★☆</div>
                                </li>
                                <li>
                                    <span class="dish-name">西湖醋鱼</span>
                                    <span class="dish-price">￥128</span>
                                    <div class="dish-rating">★★★★★</div>
                                </li>
                            </ul>
                        </div>
                        <div class="post-tags">
                            <span class="tag">杭帮菜</span>
                            <span class="tag">老字号</span>
                            <span class="tag">特色菜</span>
                        </div>
                    </div>

                    <div class="post-item" data-category="dessert">
                        <div class="post-header">
                            <h3>法式甜点探店</h3>
                            <div class="post-meta">
                                <span class="post-date">2024-01-18</span>
                                <span class="post-views">阅读: 324</span>
                                <span class="post-location">📍 上海市静安区</span>
                            </div>
                        </div>
                        <div class="food-gallery">
                            <img src="https://picsum.photos/800/400?random=35" alt="法式甜点" class="gallery-image">
                            <div class="gallery-grid">
                                <img src="https://picsum.photos/400/300?random=36" alt="马卡龙" class="gallery-image">
                                <img src="https://picsum.photos/400/300?random=37" alt="千层蛋糕" class="gallery-image">
                                <img src="https://picsum.photos/400/300?random=38" alt="巧克力慕斯" class="gallery-image">
                            </div>
                        </div>
                        <div class="post-content">
                            <div class="food-rating">
                                <div class="rating-stars">★★★★☆</div>
                                <span class="rating-score">4.5</span>
                                <span class="rating-count">(156条评价)</span>
                            </div>
                            <div class="food-info">
                                <div class="info-item">
                                    <span class="info-icon">🏠</span>
                                    <span class="info-label">店名</span>
                                    <span class="info-value">Sweet Paris</span>
                                </div>
                                <div class="info-item">
                                    <span class="info-icon">💰</span>
                                    <span class="info-label">人均</span>
                                    <span class="info-value">￥100-150</span>
                                </div>
                                <div class="info-item">
                                    <span class="info-icon">⏰</span>
                                    <span class="info-label">营业时间</span>
                                    <span class="info-value">11:00-22:00</span>
                                </div>
                            </div>
                            <h4>甜点推荐</h4>
                            <ul class="dish-list">
                                <li>
                                    <span class="dish-name">马卡龙礼盒</span>
                                    <span class="dish-price">￥128/6个</span>
                                    <div class="dish-rating">★★★★★</div>
                                </li>
                                <li>
                                    <span class="dish-name">抹茶千层</span>
                                    <span class="dish-price">￥58/份</span>
                                    <div class="dish-rating">★★★★☆</div>
                                </li>
                                <li>
                                    <span class="dish-name">巧克力慕斯</span>
                                    <span class="dish-price">￥68/份</span>
                                    <div class="dish-rating">★★★★★</div>
                                </li>
                            </ul>
                        </div>
                        <div class="post-tags">
                            <span class="tag">法式甜点</span>
                            <span class="tag">下午茶</span>
                            <span class="tag">精致甜品</span>
                        </div>
                    </div>
                </article>

                <!-- 评论区 -->
                <div class="comments-section">
                    <h3>评论</h3>
                    <div class="comment-form">
                        <form id="commentForm">
                            <div class="form-group">
                                <input type="text" id="commenterName" placeholder="您的昵称" required>
                            </div>
                            <div class="form-group">
                                <textarea id="commentContent" placeholder="分享您的美食体验..." required></textarea>
                            </div>
                            <button type="submit" class="submit-btn">发表评论</button>
                        </form>
                    </div>
                    <ul class="comment-list"></ul>
                </div>
            </div>

            <aside class="sidebar">
                <!-- 美食地图 -->
                <div class="food-map widget">
                    <h3>美食地图</h3>
                    <div class="map-container">
                        <img src="https://picsum.photos/300/200?random=39" alt="美食地图" class="map-image">
                        <div class="map-overlay">
                            <span class="map-pin" style="left: 30%; top: 40%;" title="北京美食">🍜</span>
                            <span class="map-pin" style="left: 60%; top: 60%;" title="上海美食">🍣</span>
                            <span class="map-pin" style="left: 45%; top: 70%;" title="杭州美食">🍖</span>
                        </div>
                    </div>
                </div>

                <!-- 热门餐厅 -->
                <div class="hot-restaurants widget">
                    <h3>热门餐厅</h3>
                    <div class="restaurant-list">
                        <div class="restaurant-item">
                            <img src="https://picsum.photos/300/200?random=40" alt="餐厅1" class="restaurant-image">
                            <div class="restaurant-info">
                                <h4>江南小馆</h4>
                                <div class="restaurant-rating">★★★★☆ 4.5</div>
                                <p>江浙菜 | ￥150/人</p>
                            </div>
                        </div>
                        <div class="restaurant-item">
                            <img src="https://picsum.photos/300/200?random=41" alt="餐厅2" class="restaurant-image">
                            <div class="restaurant-info">
                                <h4>巴黎左岸</h4>
                                <div class="restaurant-rating">★★★★★ 4.8</div>
                                <p>法餐 | ￥280/人</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 美食标签 -->
                <div class="tags-widget widget">
                    <h3>美食标签</h3>
                    <div class="tag-cloud">
                        <a href="#" class="tag-item" style="font-size: 1.4em">中餐</a>
                        <a href="#" class="tag-item" style="font-size: 1.2em">西餐</a>
                        <a href="#" class="tag-item" style="font-size: 1.6em">甜点</a>
                        <a href="#" class="tag-item">火锅</a>
                        <a href="#" class="tag-item" style="font-size: 1.3em">日料</a>
                        <a href="#" class="tag-item">小吃</a>
                    </div>
                </div>
            </aside>
        </div>
    </main>

    <footer>
        <p>&copy; 2024 我的个人博客. All rights reserved.</p>
    </footer>

    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/main.js"></script>
    <script src="assets/js/article-list.js"></script>
</body>
</html> 